<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>班级管理</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      background-color: #f5f6fa;
      padding: 20px;
      margin: 0;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      background-color: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    h2 {
      color: #2c3e50;
      margin-bottom: 30px;
      padding-bottom: 15px;
      border-bottom: 2px solid #eee;
    }

    .search-bar {
      display: flex;
      gap: 15px;
      margin-bottom: 30px;
      align-items: center;
      flex-wrap: wrap;
    }

    input[type="text"] {
      padding: 10px 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      flex: 1;
      min-width: 200px;
      font-size: 14px;
    }

    input[type="text"]:focus {
      border-color: #3498db;
      outline: none;
      box-shadow: 0 0 5px rgba(52,152,219,0.3);
    }

    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s;
    }

    .btn-primary {
      background-color: #3498db;
      color: white;
    }

    .btn-primary:hover {
      background-color: #2980b9;
    }

    .btn-secondary {
      background-color: #95a5a6;
      color: white;
    }

    .btn-secondary:hover {
      background-color: #7f8c8d;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      background-color: white;
    }

    th, td {
      padding: 15px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }

    th {
      background-color: #f8f9fa;
      color: #2c3e50;
      font-weight: 600;
    }

    tr:hover {
      background-color: #f8f9fa;
    }

    .action-links {
      display: flex;
      gap: 10px;
    }

    .action-links a {
      text-decoration: none;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 14px;
    }

    .edit-link {
      color: #3498db;
    }

    .no-data {
      text-align: center;
      padding: 20px;
      color: #7f8c8d;
    }

    @media (max-width: 768px) {
      .search-bar {
        flex-direction: column;
      }

      input[type="text"] {
        width: 100%;
      }

      .btn {
        width: 100%;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <h2>班级管理</h2>

  <div class="search-bar">
    <input type="text" id="searchClass" placeholder="输入班级编号或名称进行搜索">
    <button class="btn btn-primary" onclick="searchClassesByClassID()">编号搜索</button>
    <button class="btn btn-primary" onclick="searchClassesByClassName()">名称搜索</button>
    <button class="btn btn-secondary" onclick="fetchClasses()">重置</button>
  </div>

  <table>
    <thead>
    <tr>
      <th>班级编号</th>
      <th>班级名称</th>
      <th>所属二级学院</th>
      <th>专业</th>
      <th>年级</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="classesTableBody">
    </tbody>
  </table>
</div>


<script>
  //获取所有班级信息
  function fetchClasses() {
    axios.get('/api/classes/list')
            .then(function (response) {
              let classes = response.data.data;  // 返回响应data字段
              let tableContent = "";  // 表格内容初始化

              $.each(classes, function (index, classes) {
                tableContent += "<tr>";
                tableContent += "<td>" + classes.classID + "</td>";
                tableContent += "<td>" + classes.className + "</td>";
                tableContent += "<td>" + classes.depID + "</td>";
                tableContent += "<td>" + classes.major + "</td>";
                tableContent += "<td>" + classes.grade + "</td>";
                tableContent += "<td>";
                tableContent += '<a href="CM05_classesFormUser.jsp?classID=' + classes.classID + '">编辑</a>';
                tableContent += "</td>";
                tableContent += "</tr>";
              });
              // 插入表格内容
              $('#classesTableBody').html(tableContent);
            })
            .catch(function (error) {
              console.error("错误:", error);
            });
  }

  //classID搜索班级
  function searchClassesByClassID(){
    const classID = $('#searchClass').val().trim();
    console.log("classID"+ classID)
    if (!classID){
      alert("请输入班级编号进行搜索")
      return;
    }
    //发起后端请求
    axios.get('/api/classes/classID/' + classID)
            .then(function (response){
              if (response.data.code === 1) { // 判断请求是否成功
                const Class = response.data.data;  // 返回响应data字段
                const Classes = [Class]; // 将单条记录包装成数组
                let tableContent = ""; // 表格内容初始化

                $.each(Classes, function (index, Class) {
                  tableContent += "<tr>";
                  tableContent += "<td>" + Class.classID + "</td>";
                  tableContent += "<td>" + Class.className + "</td>";
                  tableContent += "<td>" + Class.depID + "</td>";
                  tableContent += "<td>" + Class.major + "</td>";
                  tableContent += "<td>" + Class.grade + "</td>";
                  tableContent += "<td>";
                  tableContent += '<a href="CM05_classesFormUser.jsp?classID=' + Class.classID + '">编辑</a>';
                  tableContent += "</td>";
                  tableContent += "</tr>";
                })
                // 渲染表格内容
                $('#classesTableBody').html(tableContent);
              } else {
                alert("未找到班级！");
                $('#classesTableBody').html(""); // 清空表格
              }
            })
            .catch(function (error) {
              console.error("搜索请求错误:", error);
              alert("搜索失败，请稍后重试！");
            });
  }
  //className搜索班级
  function searchClassesByClassName(){
    const className = $('#searchClass').val().trim();
    console.log("className"+ className)
    if (!className){
      alert("请输入班级名称进行搜索")
      return;
    }
    //发起后端请求
    axios.get('/api/classes/className/' + className)
            .then(function (response){
              if (response.data.code === 1) { // 判断请求是否成功
                const Class = response.data.data;  // 返回响应data字段
                const Classes = [Class]; // 将单条记录包装成数组
                let tableContent = ""; // 表格内容初始化

                $.each(Classes, function (index, Class) {
                  tableContent += "<tr>";
                  tableContent += "<td>" + Class.classID + "</td>";
                  tableContent += "<td>" + Class.className + "</td>";
                  tableContent += "<td>" + Class.depID + "</td>";
                  tableContent += "<td>" + Class.major + "</td>";
                  tableContent += "<td>" + Class.grade + "</td>";
                  tableContent += "<td>";
                  tableContent += '<a href="CM05_classesFormUser.jsp?classID=' + Class.classID + '">编辑</a>';
                  tableContent += "</td>";
                  tableContent += "</tr>";
                })
                // 渲染表格内容
                $('#classesTableBody').html(tableContent);
              } else {
                alert("未找到班级！");
                $('#classesTableBody').html(""); // 清空表格
              }
            })
            .catch(function (error) {
              console.error("搜索请求错误:", error);
              alert("搜索失败，请稍后重试！");
            });
  }
  window.onload = fetchClasses;
</script>
</body>
</html>